<template>
  <div>
    <div class="app-container" v-if="showHome">
      <div class="top-box">
        <img src="@/assets/images/xmgl-5.png" class="logo" />
        <span>项目管理</span>
      </div>
      <div class="tabs-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in tablist" :label='item.label + " (" +item.num + ")"' :name="item.index" :key="index">
            <div class="operation">
              <el-button type="primary" icon="el-icon-plus" @click="addProject">新建项目</el-button>
              <span class="text1">
              共<span class="red-text">{{ item.num }}</span>个系统项目
            </span>
              <div class="right">
                <el-input
                  class="input"
                  placeholder="查找项目、负责人等"
                  prefix-icon="el-icon-search"
                  @blur="handleQuery"
                  v-model="queryParams.cQuery">
                </el-input>
                <el-dropdown @command="handleCommand">
                  <div class="el-dropdown-link">
                    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">批量导出</el-dropdown-item>
                    <el-dropdown-item command="2">批量删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <el-table
              v-loading="loading"
              :header-cell-style="{
              'background-color': '#F9F9F9'
            }"
              :data="configList"
              @selection-change="handleSelectionChange"
              border
              :row-class-name="tableClass">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="系统项目名称" align="left" prop="cProNme" sortable />
              <el-table-column label="项目状态" align="center" prop="cProState" width="120">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cProState == 1" type="info">未开始</el-tag>
                  <el-tag v-if="scope.row.cProState == 2" type="warning">进行中</el-tag>
                  <el-tag v-if="scope.row.cProState == 3" type="success">开发完成</el-tag>
                  <el-tag v-if="scope.row.cProState == 4" type="danger">测试完成</el-tag>
                  <el-tag v-if="scope.row.cProState == 5" class="primary">已上线</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="创建人" align="center" prop="cCrePer" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.cCrePerNme">
                    <span class="icon-name red">{{ scope.row.cCrePerNme[scope.row.cCrePerNme.length - 1] }}</span>
                    <span>{{ scope.row.cCrePerNme }}</span>
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="负责人" align="center" prop="cProHead" width="120">
                <template slot-scope="scope">
                  <span v-if="scope.row.cProHeadNme">
                    <span class="icon-name red">{{ scope.row.cProHeadNme[scope.row.cProHeadNme.length - 1] }}</span>
                    <span>{{ scope.row.cProHeadNme }}</span>
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" align="center" prop="tCreTm" sortable>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.tCreTm) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="成员" align="center" prop="cPerNum" width="120" sortable />
              <el-table-column label="工作项数量" align="center" prop="cWiNum" width="120" sortable />
              <el-table-column label="项目进度" align="center" prop="cProPace" width="180" sortable>
                <template slot-scope="scope">
                  <div style="display: flex">
                    <div style="width: 40px">{{ scope.row.cProPace * 100 }}%</div>
                    <el-progress :percentage="scope.row.cProPace * 100" :show-text="false"></el-progress>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" header-align="left" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="openProject(scope.row)"
                  >查看</el-button>
                  <el-button
                    size="mini"
                    @click="handleUpdate(scope.row)"
                    style="margin-right: 10px"
                  >编辑</el-button>
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDelete(scope.row, 'single')"
                  >
                    <el-button
                      size="mini"
                      slot="reference"
                    >删除</el-button>
                  </el-popconfirm>

                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :current-page="queryParams.pageNum"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              @pagination="currentChang"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <new-project ref="addProject" @upDate="getList" />
      <up-date-form ref="upDateForm" @upDate="getList" />
    </div>
    <!--  项目概览  -->
    <project-overview ref="overview" @toHome="toHome" v-else @upDate="emitState" />
  </div>
</template>

<script>

import NewProject from "@/views/projectManage/project/newProject";
import {deleteProkect, emitList, list, listNum, listWorkNum} from "@/api/projectManage/project";
import UpDateForm from "@/views/projectManage/project/upDateForm";
import ProjectOverview from "@/views/projectManage/project/projectOverview";
import {mixin} from "@/views/projectManage/mixin";

export default {
  name: "Config",
  components: {ProjectOverview, UpDateForm, NewProject},
  dicts: ['sys_yes_no'],
  mixins: [mixin],
  data() {
    return {
      configList: [],
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      activeName: null,
      tablist: [
        {
          label: '全部项目',
          num: 0
        },
        {
          label: '未开始',
          num: 0
        },
        {
          label: '进行中',
          num: 0
        },
        {
          label: '开发完成',
          num: 0
        },
        {
          label: '测试完成',
          num: 0
        },
        {
          label: '已上线',
          num: 0
        }
      ],
      showHome: true
    }
  },
  created() {
    this.getRouterQuery()
  },
  mounted() {
    this.getList()
    this.getListNum()
    // 添加对 sessionStorage 的监听
    window.addEventListener("setItem", () => {
      this.getList()
    });
  },
  methods: {
    // 请求列表
    getList() {
      this.configList = []
      const params = {
        cProState: this.activeName > 0 ? this.activeName : null,
        ...this.queryParams
      }
      this.loading = true
      list(params).then(res => {
        this.configList = res.rows || []
        this.total = res.total || 0
      }).finally(() => this.loading = false)
    },
    // 返回首页
    toHome() {
      this.showHome = true
      this.$router.push({ query: {} })
    },
    // 项目概览-保存项目状态
    emitState(form) {
      emitList({
        cProNo: this.projectInfo.cProNo,
        cProState: form.cProState
      }).then(res => {
        this.$notify({title: '成功', message: '编辑成功！', type: 'success',})
        this.getList()
      })
    },
    // 接收路由传参
    getRouterQuery() {
      if (this.$route.query.showHome) {
        this.showHome = JSON.parse(this.$route.query.showHome)
      }
    },
    // 模糊查询
    handleQuery() {
      this.getList()
    },
     // 查询项目数量
    getListNum() {
      this.loading = true
      listNum().then(res => {
        this.tablist[0].num = res.data.cProNum || 0
        this.tablist[1].num = res.data.cProNum1 || 0
        this.tablist[2].num = res.data.cProNum2 || 0
        this.tablist[3].num = res.data.cProNum3 || 0
        this.tablist[4].num = res.data.cProNum4 || 0
        this.tablist[5].num = res.data.cProNum5 || 0
      }).finally(() => this.loading = false)
    },
    // 编辑
    handleUpdate(row, type) {
      this.$refs.upDateForm.open({
       row, type
      })
    },
    // 分页
    currentChang(val) {
      this.queryParams.pageNum = val.page
      this.queryParams.pageSize = val.limit
      this.getList()
    },
    // 打开项目概览
    openProject(row) {
      // 将当前项目数据共享至全局
      sessionStorage.setItem('projectInfo', JSON.stringify(row))
      this.showHome = false
      this.$nextTick(() => this.$refs.overview.open(row))
    },
    // 删除
    handleDelete(row, type) {
      let cProNos = ''
      if (type === 'single') {
        cProNos = row.cProNo
      } else {
        const list = []
        row.forEach(i => list.push(i.cProNo))
        cProNos = list.join(',')
      }
      deleteProkect(cProNos).then(res => {
        this.$notify({title: '成功', message: '删除成功！', type: 'success',});
        this.getList()
      }).catch(() =>  this.$notify({title: '警告', message: '删除失败！', type: 'warning'}))

    },
    // 切换项目状态
    handleClick() {
      console.log(this.activeName)
      this.getList()
    },
    // 更多操作
    handleCommand(command) {
      console.log(command)
      if (command === '2') {
        this.selectTable.length ?
          this.handleDelete(this.selectTable) :
          this.$notify({title: '警告', message: '请勾选要删除的项目！', type: 'warning'})
      }
    },
    // 新建项目
    addProject() {
      this.$refs.addProject.open()
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/projectManage";
</style>
